<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由模式</title>
</head>
<body>
    <div id="app">
        <a href="/news">新闻</a>
        |
        <a href="/makefriend">社交</a>

        <div id="content"></div>
    </div>
</body>
</html>

<script>
    // hash
        // 优点： 兼容性好
        //  缺点： 视觉上有井号
    // 获取hash值: location.hash

    // 监听变化 onhashchange

    // onhashchange = function(){
    //     let hash = location.hash
    //     console.log(hash);

    //     switch(hash){
    //         case "#/news":
    //             content.innerHTML = "<h1>新闻</h1>"
    //             break;
    //         case "#/makefriend":
    //             content.innerHTML = "<h1>社交</h1>"
            
    //     }
    // }

        // history 模式
            // 用了 H5 给history对象新增的方法： pushState relaceState 
            let aa = document.querySelectorAll("a")

            aa.forEach(itme=>{
                itme.onclick = function(){
                    console.log(this.getAttribute('href'));
                    let url = this.getAttribute("href")
                    // 调用 pushState  浏览器路径会发生变化 但不会立刻向服务器发起请求
                    history.pushState({nme:"雷子"},null,url)
                }
            })

            // history 监听事件         点击浏览器 前进后退 按钮才会 触发此事件
            onpopstate = function(e){
                console.log(e);
            }
</script>